<template>
  <div>这是购物车页 - mutation</div>
  <p>count: {{ count }}</p>
  <button @click="handleClick(2)">count+2</button>
  <button @click="handleClick(3)">count+3</button>

  <hr />

  <p>age: {{ age }}</p>
  <button @click="handleClick2">btn</button>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import { ADD } from "@/store/actionType";

export default {
  computed: mapState("a", ["count", "age"]),
  // computed: mapState({
  //   count: (state) => state.a.count,
  //   age: (state) => state.a.age,
  // }),
  methods: {
    // 将仓库的mutations的add和doubleAge函数，映射到组件的methods里面
    ...mapMutations("a", ["add", "doubleAge"]),
    handleClick(n) {
      // this.$store.state.count++;
      // 想改变仓库的数据的唯一的方式是提交mutation
      // 要触发仓库的mutations的函数，需要调用store的commit方法

      // commit也可以传递第二个参数
      // 第二个参数建议写成对象的形式
      // this.$store.commit("add", { n: n });
      // 等同于
      // this.$store.commit({
      //   type: "add",
      //   n,
      // });

      this.add({ n: n });
    },
    handleClick2() {
      // this.$store.commit("doubleAge");
      this.doubleAge();
    },
  },
};
</script>
